// 2. 引入并声明使用插件
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '@/store';
Vue.use(VueRouter);

import routes from './routes';
// import store from "@/store";

//解决router的3.1.0版本的重复点击按钮报错的问题
// 原型上修改push方法
const originPush = VueRouter.prototype.push; // 先将之前的存储到一个变量当中
const originReplace = VueRouter.prototype.replace; // 同上

// 修改VueRouter原型上的push 用于解决重复跳转时报错的问题
VueRouter.prototype.push = function (location, okCallBack, errCallBack) {
  if (okCallBack === undefined && errCallBack === undefined) {
    // 上面的判断成立的话，表示没有传递这两个参数
    originPush.call(this, location).catch(() => {}); // 统一处理报错的问题 一劳永逸
  } else {
    originPush.call(this, location, okCallBack, errCallBack);
  }
};

// 修改VueRouter原型上的replace 用于解决重复跳转时报错的问题
VueRouter.prototype.replace = function (location, okCallBack, errCallBack) {
  if (okCallBack === undefined && errCallBack === undefined) {
    // 上面的判断成立的话，表示没有传递这两个参数
    originReplace.call(this, location).catch(() => {}); // 统一处理报错的问题 一劳永逸
  } else {
    originReplace.call(this, location, okCallBack, errCallBack);
  }
};

// 3. 创建路由实例并添加路由规则
const router = new VueRouter({
  mode: 'history', // 设置路由模式  不要#
  routes,
  //切换到新的路由的时候 期望滚动到的位置
  scrollBehavior(to, from, savedPosition) {
    //to 表示跳转到的页面 是一个路由规则对象
    //from 表示从哪跳转过来,也是一个路由规则
    //savedPosition 记录之前页面的位置 当浏览器前进后退的按钮被单击的时候会触发 正常情况是undefined/null
    // console.log(savedPosition, 'saved');
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});
//添加前置守卫
router.beforeEach(async (to, from, next) => {
  let token = store.state.user.token;
  let userInfo = store.state.user.userInfo;
  //判断token在不在
  if (token) {
    if (to.path === '/login') {
      // 代表用户已经登录又想去登录，不能写false，写了false就卡那了，永远不可能拿到用户信息了，得在next里写（'/'）重定向。
      next('/');
    } else {
      // 如果用户不是去登录，那么此时就要看用户信息在不在，如果用户信息在就直接放行
      if (userInfo.name) {
        next();
      } else {
        //如果信息不存在，就发请求获取用户信息
        try {
          //请求获取用户信息成功，用户信息会放在vuex的state里面
          await store.dispatch('getUserInfo');
          next();
        } catch (error) {
          //如果请求获取用户信息失败，我们统一认为是token过期，要把原来的token删除，然后重新登录。
          store.dispatch('UserLogout');
          next('/login');
        }
      }
    }
  } else {
    //这里就表示用户没有登录过，就需要用户去登录
    //如果用户在没有登录的情况下去购物车或者个人中心，就需要登录
    let target = to.path;
    // console.log(target);
    // if (target.indexOf('/cart') === 0 || target.indexOf('/center') === 0) {
    //   next('/login')
    // } else {
    //   next()
    // }
    if (target.indexOf('/center') === 0) {
      next('/login');
    } else {
      next();
    }
  }
});

export default router;
